<template>
  <div>
    <table>
      <tr>
        <td>手机号：</td>
        <td><input type="text" v-model="list.userPhone" /></td>
      </tr>
      <tr>
        <td>密码：</td>
        <td><input type="password" v-model="list.userPwd" /></td>
      </tr>
      <tr>
        <td>确认密码：</td>
        <td><input type="password" v-model="list.quserPwd" /></td>
      </tr>
      <tr>
        <td></td>
        <td><input type="button" value="登录" @click="go" /></td>
      </tr>
    </table>
  </div>
</template>

<script setup lang="ts">
import { reactive, toRefs } from 'vue';

let data = reactive({
  list: {
    userPhone: '',
    userPwd: '',
    quserPwd: '',
  },
});
let { list } = toRefs(data);

function go() {
  if (list.value.userPhone == '') {
    alert('手机号不能为空');
    return;
  } else if (list.value.userPwd == '') {
    alert('密码不能为空');
    return;
  } else if (list.value.quserPwd == '') {
    alert('确认密码不能为空');
    return;
  } else if (list.value.userPhone.length < 11) {
    alert('手机号格式不正确');
    return;
  } else if (list.value.userPwd != list.value.quserPwd) {
    alert('密码和确认密码不一致');
    return;
  } else if (list.value.userPhone != '13512349876') {
    alert('内容不正确');
    return;
  } else if (list.value.userPwd != '123456') {
    alert('内容不正确');
    return;
  } else {
    alert('登录成功');
  }
}
</script>

<style scoped></style>
